<!DOCTYPE HTML>
<html lang="zh-CN">
<head><meta name="generator" content="Hexo 3.8.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="王宏亮">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <link rel="dns-prefetch" href="https://whl88.github.io">
    <!--SEO-->

<meta name="description" content="最近在企业内网用 Matomo 做网站跟踪分析，有一个需求是跟踪手机端的应用（SPA应用）。研究了一番记录如下。">



<meta name="keywords" content="Matomo,JavaScript,单页面">



<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">
    <!--Title-->


<title>Matomo JavaScript 方式追踪单页面应用（SPA） | 王宏亮</title>



    <link rel="icon" href="/favicon.ico">

    



<link rel="stylesheet" href="/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/style.css?rev=@@hash">




    



    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?c7a89a27252683d867b45e899a3d41cc";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>


	<script>
		(function(i, s, o, g, r, a, m) {
		    i['GoogleAnalyticsObject'] = r;
		    i[r] = i[r] || function() {
		        (i[r].q = i[r].q || []).push(arguments)
		    }, i[r].l = 1 * new Date();
		    a = s.createElement(o),
		    m = s.getElementsByTagName(o)[0];
		    a.async = 1;
		    a.src = g;
		    m.parentNode.insertBefore(a, m)
		})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
		ga('create', 'UA-131158522-1', 'auto');
		ga('send', 'pageview');
	</script>


    

    <script>
        (function(){
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>

</head>

</html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->

<body>
    <header class="main-header" style="background-image:url(http://snippet.shenliyang.com/img/banner.jpg)">
    <div class="main-header-box">
        <a class="header-avatar" href="/" title="王宏亮">
            <img src="/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
        	<!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
                <h2> 保持一颗好奇心 </h2>
            
    	</div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                    <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="https://whl88.github.io">王宏亮</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                            <li role="presentation" class="text-center">
                                <a href="/"><i class="fa "></i>首页</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/categories/前端/"><i class="fa "></i>前端</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/categories/后端/"><i class="fa "></i>后端</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/categories/工具/"><i class="fa "></i>工具</a>
                            </li>
                        
                            <li role="presentation" class="text-center">
                                <a href="/archives/"><i class="fa "></i>时间轴</a>
                            </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="Matomo JavaScript 方式追踪单页面应用（SPA）">
            
	            Matomo JavaScript 方式追踪单页面应用（SPA）
            
        </h1>
        <div class="post-meta">
    
    
    <span class="categories-meta fa-wrap">
        <i class="fa fa-folder-open-o"></i>
        <a href="/categories/前端">
            前端
        </a>
    </span>
    

    
    <span class="fa-wrap">
        <i class="fa fa-tags"></i>
        <span class="tags-meta">
            
                
                    <a href="/tags/Matomo" title="Matomo">
                        Matomo
                    </a>
                
                    <a href="/tags/JavaScript" title="JavaScript">
                        JavaScript
                    </a>
                
                    <a href="/tags/单页面" title="单页面">
                        单页面
                    </a>
                
            
        </span>
    </span>
    

    
        
        <span class="fa-wrap">
            <i class="fa fa-clock-o"></i>
            <span class="date-meta">2018/12/19</span>
        </span>
        
            <span class="fa-wrap">
                <i class="fa fa-eye"></i>
                <span id="busuanzi_value_page_pv"></span>
            </span>
        
    
</div>

            
            
    </div>
    
    <div class="post-body post-content">
        <p>单页面应用（<a href="https://baike.baidu.com/item/SPA/17536313" target="_blank" rel="noopener">SPA</a>）随着<a href="https://cn.vuejs.org/" title="Vue 官方网站" target="_blank" rel="noopener">Vue</a>、<a href="https://angular.io/" title="angular 官网" target="_blank" rel="noopener">Angular</a>、<a href="https://react.docschina.org/" title="中文文档" target="_blank" rel="noopener">React</a>等框架的崛起，已经成为一种潮流。由于单页面应用自始至终都一个在同一个Docment上渲染元素，页面根本不跳转，这也让 Matomo 在默认用法下不能自动追踪。<br>最近在企业内网用 Matomo 做网站跟踪分析，有一个需求是跟踪手机端的应用（SPA应用）。研究了一番记录如下。  </p>
<p>用JS方式追踪单页面应用，其原理就是当页面变动的时候，手动调用 Matomo 本来应该在页面加载时自动帮我们调用的几个API。</p>
<h1 id="重新设置自定义变量"><a href="#重新设置自定义变量" class="headerlink" title="重新设置自定义变量"></a>重新设置自定义变量</h1><p>用下面的代码将 page 作用域的 自定义变量删除：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">_paq.push([<span class="string">'deleteCustomVariables'</span>, <span class="string">'page'</span>]);</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>自定义变量有 page 作用域和 visit 作用域之分。page 作用域内的变量描述的是当前页面本身的属性，在每次页面请求的时候都可以变化，比如“文章分类”、“商品名称”之类的；visit 作用域内的变量在一个完整的session中只允许有一个值，这种作用域的变量适合存“访问者性别”，“访问者身份证号”等跟访问者有关的属性。关于自定义变量就说这么多，更多的信息可以先查看<a href="https://developer.matomo.org/guides/tracking-javascript-guide#custom-variables" title="“自定义变量” 官方文档" target="_blank" rel="noopener">官方文档</a>，我会尽快出一篇关于 Matomo <a href="/2018/12/23/Matomo-Javascript-方式追踪-自定义变量/index.html" title="Matomo Javascript-方式追踪-自定义变量">[自定义变量]</a><br> 和 自定义维度 的一篇文章。</p>
</blockquote>
<h1 id="设置页面加载时间"><a href="#设置页面加载时间" class="headerlink" title="设置页面加载时间"></a>设置页面加载时间</h1><p>你可能会用 Ajax 从服务器实时加载新模块，那你得做一个计时，并且把加载这个模块的耗时（毫秒数）通过下面这个 API 发送给 Matomo 。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">_paq.push([<span class="string">'setGenerationTimeMs'</span>, timeItTookToLoadPage]);</span><br></pre></td></tr></table></figure></p>
<h1 id="设置引用页（Referer）"><a href="#设置引用页（Referer）" class="headerlink" title="设置引用页（Referer）"></a>设置引用页（Referer）</h1><p>告诉 Matomo 现在这个页面是从哪个页面跳过来的。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">_paq.push([<span class="string">'setReferrerUrl'</span>, previousPageUrl]);</span><br></pre></td></tr></table></figure></p>
<blockquote>
<p>重要提示：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">_paq.push([<span class="string">'deleteCustomVariables'</span>, <span class="string">'page'</span>]);</span><br><span class="line">_paq.push([<span class="string">'setGenerationTimeMs'</span>, timeItTookToLoadPage]);</span><br><span class="line">_paq.push([<span class="string">'setReferrerUrl'</span>, previousPageUrl]);</span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>上面的代码执行后需要执行<code>_paq.push([&#39;trackPageView&#39;]);</code>才能提交修改。具体的可以看文末的例子</p>
</blockquote>
<h1 id="追踪新内容"><a href="#追踪新内容" class="headerlink" title="追踪新内容"></a>追踪新内容</h1><p>当新的内容被加载到 Document 中，新内容这一块我们得让 Matomo 扫描。下面的一些代码不是必须的，根据你的需求来定。</p>
<p>如果新内容中有音视频，并且你用到了 Matomo 的<a href="https://matomo.org/docs/media-analytics/" target="_blank" rel="noopener">音视频分析</a><br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">_paq.push([<span class="string">'MediaAnalytics::scanForMedia'</span>, documentOrElement]);</span><br></pre></td></tr></table></figure></p>
<p>如果新内容中有表单，并且你用到了 Matomo 的<a href="https://matomo.org/docs/form-analytics/" target="_blank" rel="noopener">表单分析</a><br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">_paq.push([<span class="string">'FormAnalytics::scanForForms'</span>, documentOrElement]);</span><br></pre></td></tr></table></figure></p>
<p>如果新内容中有超链接，并且你用到了 Matomo 的离站链接分析、下载分析<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">_paq.push([<span class="string">'enableLinkTracking'</span>]);</span><br></pre></td></tr></table></figure></p>
<p>如果你用到了 Matomo 的<a href="https://matomo.org/docs/content-tracking/" target="_blank" rel="noopener">内容追踪</a><br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">_paq.push([<span class="string">'trackContentImpressionsWithinNode'</span>, documentOrElement]);</span><br></pre></td></tr></table></figure></p>
<hr>
<p>如果你不想做那么多判断，你可以像下面的例子一样，一股脑全部调用一下，毕竟这也耗不了多少性能。</p>
<h1 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h1><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> currentUrl = location.href;</span><br><span class="line"><span class="built_in">window</span>.addEventListener(<span class="string">'hashchange'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    _paq.push([<span class="string">'setReferrerUrl'</span>, currentUrl]);</span><br><span class="line">     currentUrl = <span class="string">''</span> + <span class="built_in">window</span>.location.hash.substr(<span class="number">1</span>);</span><br><span class="line">    _paq.push([<span class="string">'setCustomUrl'</span>, currentUrl]);</span><br><span class="line">    _paq.push([<span class="string">'setDocumentTitle'</span>, <span class="string">'My New Title'</span>]);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// remove all previously assigned custom variables, requires Matomo (formerly Piwik) 3.0.2</span></span><br><span class="line">    _paq.push([<span class="string">'deleteCustomVariables'</span>, <span class="string">'page'</span>]); </span><br><span class="line">    _paq.push([<span class="string">'setGenerationTimeMs'</span>, <span class="number">0</span>]);</span><br><span class="line">    _paq.push([<span class="string">'trackPageView'</span>]);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// make Matomo aware of newly added content</span></span><br><span class="line">    <span class="keyword">var</span> content = <span class="built_in">document</span>.getElementById(<span class="string">'content'</span>);</span><br><span class="line">    _paq.push([<span class="string">'MediaAnalytics::scanForMedia'</span>, content]);</span><br><span class="line">    _paq.push([<span class="string">'FormAnalytics::scanForForms'</span>, content]);</span><br><span class="line">    _paq.push([<span class="string">'trackContentImpressionsWithinNode'</span>, content]);</span><br><span class="line">    _paq.push([<span class="string">'enableLinkTracking'</span>]);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
    </div>
    
        <div class="reward">
    <div class="reward-wrap">赏
        <div class="reward-box">
            
                <span class="reward-type">
                    <img class="alipay" src="/img/alipay.jpg"><b>支付宝打赏</b>
                </span>
            
            
                <span class="reward-type">
                    <img class="wechat" src="/img/WeChat.jpg"><b>微信打赏</b>
                </span>
            
        </div>
    </div>
    <p class="reward-tip">赞赏是不耍流氓的鼓励</p>
</div>


    
    <div class="post-footer">
        <div>
            
                转载声明：商业转载请联系作者获得授权,非商业转载请注明出处 © <a href="https://whl88.github.io/" target="_blank">王宏亮</a>
            
        </div>
        <div>
            
        </div>
    </div>
</article>

<div class="article-nav prev-next-wrap clearfix">
    
        <a href="/2018/12/23/Matomo-Javascript-方式追踪-自定义变量/" class="pre-post btn btn-default" title="Matomo Javascript 方式追踪 自定义变量">
            <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
            <span class="hidden-xs">Matomo Javascript 方式追踪 自定义变量</span>
        </a>
    
    
</div>


    <div id="comments">
        
    
    <div id="vcomments" class="valine"></div>
    <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/assets/valine.min.js"></script>

    <script>
        new Valine({
            av: AV,
            el: '#vcomments',
            appId: 'CxcHvL7lGp624Mtzr04s00U5-gzGzoHsz',
            appKey: '7CPvU50bEMm4D83mC4AWBtLj',
            placeholder: '说点什么吧',
            notify: false,
            verify: false,
            avatar: 'mm',
            meta: 'nick,mail'.split(','),
            pageSize: '10',
            path: window.location.pathname,
            lang: 'zh-CN'.toLowerCase()
        })
    </script>


    </div>





                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">文章目录</h3>
        
            <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#重新设置自定义变量"><span class="toc-text">重新设置自定义变量</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#设置页面加载时间"><span class="toc-text">设置页面加载时间</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#设置引用页（Referer）"><span class="toc-text">设置引用页（Referer）</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#追踪新内容"><span class="toc-text">追踪新内容</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#例子"><span class="toc-text">例子</span></a></li></ol>
        
    </div>
</aside>

                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>

<a id="back-to-top" class="icon-btn hide">
	<i class="fa fa-chevron-up"></i>
</a>




    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
        访问量:
        <strong id="busuanzi_value_site_pv">
            <i class="fa fa-spinner fa-spin"></i>
        </strong>
        &nbsp; | &nbsp;
        访客数:
        <strong id="busuanzi_value_site_uv">
            <i class="fa fa-spinner fa-spin"></i>
        </strong>
    
</div>

            </div>
            <div class="col-sm-12">
                <span>Copyright &copy; 2018
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>






    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


<script src="/js/app.js?rev=@@hash"></script>

</body>
</html>